<template>
    <div class="addFollow">
        <el-card>
            <el-button type="info" size="small" icon="el-icon-arrow-left"
                @click="backToPrev">
                返回</el-button>
            <el-form size="small" class="editForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">类型</span>
                            </span>
                            <div class="choose">
                                <el-select v-model="editForm.progressType"
                                    placeholder="请选择类型">
                                    <el-option label="电话" value="phone"></el-option>
                                    <el-option label="邮件" value="email"></el-option>
                                    <el-option label="信息"
                                        value="message"></el-option>
                                    <el-option label="拜访" value="visit"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label" required>
                                <span class="labelText">标题</span>
                            </span>
                            <el-input v-model="editForm.head"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">跟进日期</span>
                            </span>
                            <div class="dateChoose">
                                <el-date-picker v-model="editForm.progressTime"
                                    align="right" type="date" placeholder="选择日期"
                                    :picker-options="pickerOptions">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">状态</span>
                            </span>
                            <div class="choose">
                                <el-select v-model="editForm.progressStatus"
                                    placeholder="请选择状态">
                                    <el-option label="新跟进" value="0"></el-option>
                                    <el-option label="进行中" value="1"></el-option>
                                    <el-option label="已完成" value="2"></el-option>
                                    <el-option label="已取消" value="3"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">供应商</span>
                            </span>
                            <el-input placeholder="请查找供应商" readonly
                                v-model="providerName">
                                <el-button slot="suffix" type="success" size='mini'
                                    @click="searchSupplier">
                                    <i class="el-icon-search"></i>
                                    查找</el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">下次跟进</span>
                            </span>
                            <div class="dateChoose">
                                <el-date-picker v-model="editForm.nextProgressTime"
                                    align="right" type="date" placeholder="选择日期"
                                    :picker-options="pickerOptions">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="subBtn">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="backToPrev">取消</el-button>
                </el-form-item>
            </el-form>
            <!-- 模态框——查找供应商 -->
            <el-dialog title="供应商查找" :visible.sync="dialogTableVisible">
                <el-card>
                    <el-input placeholder="请输入内容" class="input-with-select"
                        width="200" v-model="normalSearchInput">
                        <el-button slot="append" icon="el-icon-search"
                            @click="search"></el-button>
                    </el-input>
                    <el-table :data="supplierData">
                        <el-table-column property="type" label="类型"
                            width="150"></el-table-column>
                        <el-table-column property="name" label="供应商名称"
                            width="200"></el-table-column>
                        <el-table-column property="contact"
                            label="联系人"></el-table-column>
                        <el-table-column property="userId"
                            label="负责人"></el-table-column>
                        <el-table-column property="status" label="状态">
                            <template slot-scope="scope">
                                <el-tag disable-transitions type="success"
                                    v-if="scope.row.state == '0'">有效</el-tag>
                                <el-tag disable-transitions type="info"
                                    v-if="scope.row.state == '1'">无效</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="success" size="mini"
                                    @click="chooseSupplier(scope.row)">
                                    <i class="el-icon-plus"></i>
                                    选择该供应商
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页器 -->
                    <Pagination :total="total" :pageSize="pageSize"
                        @getPagination="getPagination"></Pagination>
                </el-card>
            </el-dialog>
        </el-card>

    </div>
</template>
  
<script>



import dayjs from 'dayjs';
import Pagination from '@/components/Pagination';

export default {
    name: '',
    data() {
        return {
            dialogTableVisible: false,
            total: 0,
            currentPage: 1,
            pageSize: 10,
            normalSearchInput: '',
            providerName: '',
            statusName: '',
            editForm: {
                "createTime": "2023-02-21T02:05:02.450Z",
                "details": "string",
                "head": "string",
                "id": 0,
                "isDeleted": 0,
                "nextProgressTime": "2023-02-21T02:05:02.450Z",
                "phone": "string",
                "progressStatus": "string",
                "progressTime": "2023-02-21T02:05:02.450Z",
                "progressType": "string",
                "providerId": 0,
                "updateTime": "2023-02-21T02:05:02.450Z",
                "userId": 0
            },
            supplierData: [
                {
                    id: 1,
                    type: '公海',
                    name: 'xxx',
                    state: '有效',
                    followDate: ''
                },
                {
                    id: 2,
                    type: '公海',
                    name: 'xxx',
                    state: '无效',
                    followDate: ''
                },
            ],
        }
    },
    components: {
        Pagination
    },
    mounted() {
        this.editForm = { ...this.$route.query.sysProviderProgress };
        console.log(this.editForm);
        this.providerName = this.$route.query.sysProvider.name
    },
    methods: {
        dayjs,
        backToPrev() {
            this.$router.push('/supply/supFollow')
        },
        onSubmit() {
            console.log('保存');
        },
        //供应商模态框
        searchSupplier() {
            this.dialogTableVisible = true;
            this.getSupplierList(this.currentPage, this.pageSize);
        },
        async getSupplierList(currentPage, pageSize) {
            let res = await this.$api.supply.getAllSupplierList({ currentPage, pageSize })
            //供应商列表
            console.log(res.data.data.list);
            if (res.data.code === 200) {
                this.supplierData = res.data.data.list;
                //页码
                this.total = res.data.data.total;
            } else {
                console.log('请求失败');
                this.supplierData = []
                this.pageSize = 0;
                this.total = 1;
            }
        },
        search() {
            let res = this.$api.supply.findSupplier({
                "address": "string",
                "city": this.normalSearchInput,
                "content": this.normalSearchInput,
                "currentPage": 0,
                "employeeNum": 0,
                "intention": this.normalSearchInput,
                "level": 0,
                "name": this.normalSearchInput,
                "pageSize": 0,
                "providerType": this.normalSearchInput,
                "province": this.normalSearchInput,
                "userId": 0
            });
            console.log(res);
        },
        async onSubmit() {
            this.editForm.createTime = new Date(dayjs().format("YYYY-MM-DD HH:mm:ss")).toISOString();
            this.editForm.userId=sessionStorage.getItem('userID')
            console.log(this.editForm);
            let res = await this.$api.supply.editFollow(this.editForm)
            console.log(res);
            if (res.data.code === 200) {
                //跳转到列表页面
                this.$router.push('/supply/supFollow')
                //提示
                this.$message({
                    message: '恭喜你，修改供应商成功',
                    type: 'success'
                });
            } else {
                //错误信息提示
                this.$message.error('出现错误，修改失败');
            }
        },
        //获取点击的页码-------------------------------
        getPagination(page) {
            console.log('----', page);
            this.currentPage = page;
            this.getSupperList(this.currentPage, this.pageSize);
        },
        pickerOptions() {
            console.log('pickerOptions');
        },
        chooseSupplier(row) {
            console.log(row.id);
            this.editForm.providerId = row.id;
            this.providerName = row.name;
            this.dialogTableVisible = false;
        }
    }
}
</script>
<style scoped>
.editFollow {
    margin: 20px 5px 0;
}

.labelText {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

hr {
    height: 0px;
    border: 1px solid #6c7b8b;
}

.subBtn {
    text-align: center;
}

.choose>>>.el-select {
    display: block;
}

.dateChoose>>>.el-date-editor {
    display: block;
    width: 100%;
}

.dateChoose>>>.el-input__prefix {
    top: 17px;
}

.choose>>>.el-select .el-input__suffix {
    top: 15px;
}
</style>